<script lang="ts" setup>
import {CoffeeCup, Wallet, Lightning,  ArrowRight,
  CaretBottom,
  CaretTop,
  Warning,}from '@element-plus/icons-vue'
import useUserInfoStore from '@/stores/userInfo.js';
import { ref,onMounted ,reactive} from 'vue';
import { utilityBillGetMonthService,utilityInfoService } from '@/api/utilitybill.js';
import * as echarts from 'echarts'
const userInfoStore = useUserInfoStore();
const moneyLeft = ref(userInfoStore.userInfo.accountbalance)
const waterThisMonth = ref()
const eThisMonth = ref()
const utilityThisMonth=async ()=>{
  let result = await utilityBillGetMonthService()
  waterThisMonth.value=result.data.waterusage
  eThisMonth.value=result.data.electricityusage
}
utilityThisMonth();

const lineChartRef=ref()
let WaterData = [];
let PowerData = [];
let month = reactive([]);
//图表主体
const optionLine = ref({
  title: {
    text: '用电量',
    left: 'center', // 标题水平居中
    top: 'top',    // 标题可以放置在顶部或根据需要调整
    textAlign: 'center', // 文本水平居中对齐
  },
  tooltip: {},
  xAxis: {
    type: 'category',
    data: month
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '用水量',
      type: 'bar',
      data: WaterData,
      itemStyle: {
        color: '#409eff', // 线条颜色
      },
      symbol: 'circle', // 标记点形状
      symbolSize: 10 // 标记点大小
    },
    {
      name:'用电量',
      type:'bar',
      data:PowerData,
      itemStyle: {
        color: '#ffc0cb', // 线条颜色
      },
      symbol: 'circle', // 标记点形状
      symbolSize: 10 // 标记点大小

    }
  ]
});

const ChartData = async () =>{
  let chartWaterData:[number,number][] = [];
  let chartPowerData:[number,number][] = [];
  await utilityInfoService({
    pageNum:1,
    pageSize:5
  }).then( res=>{

    //提取月份和总花费
    for(let node of res.data.items){
      const date = new Date(node.createtime);
      const dateNumber = date.getMonth() + 1 as number;
      month.push(dateNumber);
      chartWaterData.push([dateNumber,node.watercost])
      chartPowerData.push([dateNumber,node.electricitycost]);
    }
    month.sort((a,b)=>a-b);
    chartWaterData.sort((a,b)=>a[0] - b[0]);
    chartPowerData.sort((a,b)=>a[0] - b[0]);

    for(let item of chartWaterData){
      WaterData.push(item[1]);
    }

    for(let item of chartPowerData){
      PowerData.push(item[1]);
    }


  })

}
onMounted(async () => {
  await ChartData();
  const lineChart = echarts.init(lineChartRef.value as HTMLDivElement);

  lineChart.setOption(optionLine.value);
});

</script>



<template>
  <el-row :gutter="16">
    <el-col :span="8">
      <div class="statistic-card">
        <el-statistic :value="moneyLeft"  precision="2">
          <template #prefix>
            ￥
          </template>
          <template #title>
            <div style="display: inline-flex; align-items: center">
              <el-icon> <Wallet /></el-icon>剩余预交费
              <el-tooltip
                effect="dark"
                content="Number of users who logged into the product in one day"
                placement="top"
              >
                <el-icon style="margin-left: 4px" :size="12">
                  <Warning />
                </el-icon>
              </el-tooltip>
            </div>
          </template>
        </el-statistic>
      </div>
    </el-col>
    <el-col :span="8">
      <div class="statistic-card">
        <el-statistic :value="waterThisMonth" precision="2">
          <template #suffix>
            t
          </template>
          <template #title>
            <div style="display: inline-flex; align-items: center">
              <el-icon><CoffeeCup /></el-icon>本月用水
              <el-tooltip
                effect="dark"
                content="Number of users who logged into the product in one month"
                placement="top"
              >
                <el-icon style="margin-left: 4px" :size="12">
                  <Warning />
                </el-icon>
              </el-tooltip>
            </div>
          </template>
        </el-statistic>
      </div>
    </el-col>
    <el-col :span="8">
      <div class="statistic-card">
        <el-statistic :value="eThisMonth" title="New transactions today"  precision="2">
          <template #suffix>
            kW.h
          </template>
          <template #title>
            <div style="display: inline-flex; align-items: center">
              <el-icon><Lightning /></el-icon>本月用电
            </div>
          </template>
        </el-statistic>
      </div>
    </el-col>
  </el-row>
  <el-row>
    <el-col :span="24">
      <div ref="lineChartRef" class="line-chart"></div>

    </el-col>
  </el-row>

</template>



<style lang="scss" scoped>
:global(h2#card-usage ~ .example .example-showcase) {
  background-color: var(--el-fill-color) !important;
}

.el-statistic {
  --el-statistic-content-font-size: 28px;
}

.statistic-card {
  height: 100%;
  padding: 20px;
  border-radius: 4px;
  background-color: var(--el-bg-color-overlay);
}

.statistic-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--el-text-color-regular);
  margin-top: 16px;
}

.statistic-footer .footer-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.statistic-footer .footer-item span:last-child {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
}

.green {
  color: var(--el-color-success);
}
.red {
  color: var(--el-color-error);
}
.line-chart {
  position: absolute;
  top:100px;
  width: 100%;
  height: 400px;
  background-color: var(--el-bg-color-overlay);
}
</style>





